<template>
    <el-drawer v-model="isDrawerVisible" title="配送详情" :with-header="true">
        <el-descriptions direction="vertical" :column="3" size="large" border>
            <el-descriptions-item label="配送id">{{peisong.psid}}</el-descriptions-item>
            <el-descriptions-item label="订单id">{{peisong.ddid}}</el-descriptions-item>
            <el-descriptions-item label="骑手id">{{peisong.qsid}}</el-descriptions-item>
            <el-descriptions-item label="配送开始时间">{{peisong.psks}}</el-descriptions-item>
            <el-descriptions-item label="配送结束时间">{{peisong.psjs}}</el-descriptions-item>
            <el-descriptions-item label="配送状态">{{peisong.pszt}}</el-descriptions-item>
        </el-descriptions>
    </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 控制抽屉的显示
const isDrawerVisible = ref(false);

const peisong = ref({
    psid: '',
    ddid: '',
    qsid: '',
    psks: '',
    psjs: '',
    pszt: 0
});

// 接收父组件传递过来的 对象 数据
const handleDetailData = (obj) => {
    isDrawerVisible.value = true;
    peisong.value = obj;
}

// 将 handleDetailData 暴露给父组件
defineExpose({
    handleDetailData
})
</script>

<style scoped>
</style>